---
title: Script Loader
description: Load scripts based on consent. Used to load scripts that require the user's consent, such as analytics scripts.
lastModified: 2025-09-19

availableIn:
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/script-loader'
    title: 'JavaScript'
  - framework: 'next'
    url: '/docs/frameworks/next/script-loader'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/script-loader'
    title: 'React'
---

<import>../javascript/shared/script-loader.mdx#overview</import>

<import>../javascript/shared/script-loader.mdx#tracking-blocker</import>

## Implementation

<Tabs items={['App Directory', 'Pages Directory']}>
  <Tab value="App Directory">
    Due to the nature of Next.js App Directory, we have to define callbacks to run in a client component.

    ```ts title="app/consent-manager.client.tsx"
    'use client';

    import { ClientSideOptionsProvider } from '@c15t/nextjs/client';
    import { googleTagManager } from '@c15t/scripts/google-tag-manager';

    export function ConsentManagerClient() {
    	return (
    		<ClientSideOptionsProvider
    			scripts={[
    				googleTagManager({
    					id: 'GTM-XXXXXXX',
    				}), // Prebuilt script or...
    				{
    					id: 'example',
    					src: 'https://analytics.example.com/script.js',
    					category: 'analytics',
    				}
    			]}
    		/>
    	);
    }
    ```

    <Callout type="note">
      Ensure you import this component in your `app/layout.tsx` file.
    </Callout>

    ```ts title="app/consent-manager.tsx"
    import { ConsentManagerProvider } from '@c15t/nextjs';
    import { ConsentManagerClient } from './consent-manager.client';
    import type { ReactNode } from 'react';

    export default function ConsentManager({ children }: { children: ReactNode }) {
      return (
        <ConsentManagerProvider options={{
          // your options here
        }}>
          <ClientProvider />
          {children}
        </ConsentManagerProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Pages Directory">
    ```ts title="pages/_app.tsx"
    import { ConsentManagerProvider } from '@c15t/nextjs/pages';
    import { googleTagManager } from '@c15t/scripts/google-tag-manager';
    import type { AppProps } from 'next/app';

    export default function App({ Component, pageProps }: AppProps) {
    return (
      <ConsentManagerProvider options={{
        scripts: [
          googleTagManager({
            id: 'GTM-XXXXXXX',
          }), // Prebuilt script or...
          {
            id: 'example',
            src: 'https://analytics.example.com/script.js',
            category: 'analytics',
          }
        ]
      }}>
        <Component {...pageProps} />
      </ConsentManagerProvider>
    );
    }
    ```
  </Tab>
</Tabs>

<import>../javascript/shared/script-loader.mdx#prebuilt-scripts</import>

<import>../javascript/shared/script-loader.mdx#scripts-table</import>

<import>../javascript/shared/script-loader.mdx#always-load</import>

## Types

<import>../javascript/shared/script-loader.mdx#script-type</import>
